<template>
  <!-- 借款需求 -->
  <div>
    <p>借款需求</p>
    <div>
      <el-descriptions class="margin-top" :column="3" border>
        <!-- 借款金额 -->
        <el-descriptions-item>
          <template #label>借款金额</template>
          <el-input v-model="input1" />
        </el-descriptions-item>
        <!-- 产品名称 -->
        <el-descriptions-item>
          <template #label>产品名称</template>
          <el-input v-model="input2" />
        </el-descriptions-item>
        <!-- 还款方式 -->
        <el-descriptions-item>
          <template #label>还款方式</template>
          <el-select v-model="value" placeholder=" " size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <!-- 期限类型 -->
        <el-descriptions-item>
          <template #label>期限类型</template>
          <el-select v-model="value1" placeholder=" " size="large">
            <el-option
              v-for="item in age_limit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <!-- 期限 -->
        <el-descriptions-item>
          <template #label>期限</template>
          <el-input v-model="input3" />
        </el-descriptions-item>
        <!-- 月利率（%） -->
        <el-descriptions-item>
          <template #label>月利率(%)</template>
          <el-input v-model="input4" />
        </el-descriptions-item>
        <!-- 手续费率（%） -->
        <el-descriptions-item>
          <template #label>手续费率(%)</template>
          <el-input v-model="input5" />
        </el-descriptions-item>
        <!-- 违约利率 -->
        <el-descriptions-item>
          <template #label>违约利率(%)</template>
          <el-input v-model="input6" />
        </el-descriptions-item>
        <!-- 借款主体 -->
        <el-descriptions-item>
          <template #label>借款主体</template>
          <el-select v-model="value2" placeholder="请选择" size="large">
            <el-option
              v-for="item in main_body"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <!-- 借款用途 -->
        <el-descriptions-item>
          <template #label>借款用途</template>
          <el-input
            v-model="textarea"
            :rows="2"
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 5, maxRows: 10 }"
          />
        </el-descriptions-item>
      </el-descriptions>
      <p style="margin-left: 5px">流程信息</p>
      <el-descriptions :column="3" border>
        <el-descriptions-item
          label="处理意见"
          label-align="left"
          align="center"
          width="112px"
          span="3"
        >
          <el-input v-model="input7" />
        </el-descriptions-item>

        <el-descriptions-item
          label="意见内容"
          label-align="left"
          align="center"
        >
          <el-input
            v-model="textarea2"
            :autosize="{ minRows: 4, maxRows: 6 }"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div id="but">
      <el-button type="primary" class="btn" @click="tijiao()">提交</el-button>
      <el-button type="primary" class="btn" @click="baocun()">保存</el-button>
      <el-button type="primary" class="but" @click="fanhiu()">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
const value = ref("");
const value1 = ref("");
const value2 = ref("");
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("");
const input5 = ref("");
const input6 = ref("");
const input7 = ref("");
const textarea = ref("");
const textarea2 = ref("");

/* 还款方式 */
const options = [
  {
    value: "Option1",
    label: "按月付息，到期还本",
  },
  {
    value: "Option2",
    label: "等额本息",
  },
  {
    value: "Option3",
    label: "到期一次性还本付息",
  },
  {
    value: "Option4",
    label: "一次性付息，到期还本",
  },
  {
    value: "Option5",
    label: "按日计息",
  },
  {
    value: "Option6",
    label: "等额本金",
  },
  {
    value: "Option7",
    label: "按月计息",
  },
];
/* 期限类型 */
const age_limit = [
  {
    value: "limit1",
    label: "月",
  },
  {
    value: "limit2",
    label: "日",
  },
  {
    value: "limit3",
    label: "年",
  },
];
/* 借款主体 */
const main_body = [
  {
    value: "main1",
    label: "个人贷款",
  },
  {
    value: "main2",
    label: "个体工商户",
  },
  {
    value: "main3",
    label: "农村专业合作组织",
  },
  {
    value: "main4",
    label: "微型企业",
  },
  {
    value: "main5",
    label: "上游",
  },
  {
    value: "main6",
    label: "中型及以上企业",
  },
  {
    value: "main7",
    label: "其他组织贷款",
  },
];
let fanhiu = () => {
  router.go(-1);
};
/* 提交 */
let tijiao = () => {
  ElNotification.success({ message: "提交成功!" });
};
/* 保存 */
let baocun = () => {
  ElNotification.success({ message: "保存成功!" });
};
</script>

<style scoped>
.el-select {
  width: 100%;
}
.but {
  background: none;
  color: #4eabfe;
}
#but {
  float: right;
}
.btn {
  /* background: #3985c8; */
  color: white;
  width: 100px;
}
</style>